<template>
	<view class="content">
		<view class="device-view">
			<view class="alarm-view-item">
				<view class="alarm-view-item-c">
					<view class="upload-img-title"><view>请输入备注：</view></view>
					<view style="margin: 10px 10px 0 10px; background-color: #E7EBF4;"><uni-easyinput type="textarea" v-model="form.handleContent"></uni-easyinput></view>
				</view>
			</view>
			<view class="alarm-view-item">
				<view class="alarm-view-item-c">
					<view class="upload-img-title"><view>是否结束报警：</view></view>
					<view class="upload-img"><uni-data-checkbox :multiple="false" v-model="form.isFinishAlarm" mode="default" :localdata="isFinish"></uni-data-checkbox></view>
				</view>
			</view>
			<view class="alarm-view-item">
				<view class="alarm-view-item-c">
					<view class="upload-img-title"><view>请上传图片：</view></view>
					<view class="upload-img"><uni-file-picker limit="9" ref="files" :auto-upload="false"></uni-file-picker></view>
				</view>
			</view>
		</view>
		<button class="add-btn" @click="submit">提交</button>
	</view>
</template>

<script>
import baseUrl from '../../../config/baseUrl.js'
import { addHandleRecord } from '../../../api/alarm.js'
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			id: '',
			formData: {},
			form: { handleContent: '' },
			isFinish: [{ code: 0, codeDesc: '不结束' }, { code: 1, codeDesc: '结束' }]
		}
	},
	onLoad(options) {
		if (options.id != null) {
			// 查看
			uni.getStorage({
				key: 'detail',
				success: res => {
					this.formData = res.data
				}
			})
		}
	},
	computed: { ...mapGetters({ userInfo: 'userInfo' }) },
	methods: {
		uploadPic() {
			let pics = []
			let token = this.userInfo.token
			let length = this.$refs.files.files.length
			let count = 0
			return new Promise((resolve, reject) => {
				this.$refs.files.files.forEach(function(item, index) {
					let n = uni.uploadFile({
						url: baseUrl.baseUrl + '/public/uploadAttachmentFile',
						header: { token: token },
						filePath: item.url,
						name: 'file',
						success: uploadFileRes => {
							let json = JSON.parse(uploadFileRes.data)
							pics.push({
								name: item.name,
								url: json.data
							})
							count++
							if (count == length) {
								resolve(pics)
							}
						}
					})
				})
			})
		},
		//提交
		async submit() {
			if (this.form.handleContent == '') {
				uni.showToast({
					title: '请输入备注',
					duration: 1000,
					icon: 'none'
				})
				return false
			}
			this.form.businessId = this.formData.id
			this.form.devname = this.formData.devname
			this.form.devbm = this.formData.devbm
			this.form.businessType = 1 //水土流失预警指标
			if (this.$refs.files.files.length > 0) {
				let roadDiseaseSporPics = await this.uploadPic()
				this.form.gatherPics = JSON.stringify(roadDiseaseSporPics)
			}
			addHandleRecord(this.form).then(res => {
				if (res.code == 200) {
					uni.showToast({
						icon: 'none',
						title: '处理成功！',
						duration: 2000
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.tag-class {
	float: left;
	margin: 10px 5px 0px 0px;
	width: 20%;
	height: 10%;
	line-height: 50rpx;
	border: 2rpx solid #e6e6e6;
	text-align: center;
	border-radius: 13px;
	display: flex;
	justify-content: center; //左右居中
	align-items: center; //上下居中

	font-size: 12px;
	color: #666;
}

.xuan {
	color: #046afb !important;
	border: 2rpx solid #046afb;
}

page {
	background: #f2f6ff;
	padding-top: 16upx;
}

.device-view {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	width: 95%;
	margin: auto;
	text-align: center;
	margin-bottom: 20px;

	.alarm-view-item {
		padding: 10px;
		background-color: #ffffff;
		width: 97%;
		height: auto;
		margin-left: 1.5%;
		margin-top: 10px;

		.alarm-view-item-t {
			display: flex;
			justify-content: space-between;
			padding-bottom: 5px;
			// border-bottom: 1px solid rgba($color: #409eff, $alpha: 0.5);
		}

		.alarm-view-item-c {
			.item-c-i-t {
				margin-top: 10px;
			}

			.item-c-bm-t {
				display: flex;
				margin-left: 15px;
				margin-bottom: 20px;
				justify-content: space-between;
				align-items: center;
				color: #333333;
				font-size: 28upx;
			}

			.upload-img-title {
				display: flex;
				margin-left: 10px;
				color: #333333;
				font-size: 28upx;
			}

			.upload-img {
				background-color: #ffffff;
				padding: 10px 10px 0 10px;
			}
		}
	}
}

.bot-row {
	padding: 5px;
	display: flex;
	align-items: center;
	font-size: 28upx;
	ine-height: 28px;

	.text1 {
		flex: 1;
		color: #333333;
		display: flex;
		margin-left: 10px;
		justify-content: left;
	}

	.text2 {
		flex: 1;
		color: #333333;
		display: flex;
		margin-right: 10px;
		justify-content: right;
	}
}

.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 20px);
	// height: 80upx;
	margin: 60upx auto;
	color: #fff;
	background-color: #046afb;
	border-radius: 5px;
	font-size: 14px;
	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
